import { connect } from 'react-redux';
import { ADMIN_AUTH_KEY, SUPER_ADMIN_AUTH_KEY } from '@conf';
import { Navigate } from 'react-router-dom';
import CountUp from 'react-countup';
import { getAuth, GetAuthParams } from 'api/user';
import { memo, useEffect, useState } from 'react';
import { dateFormat } from '@/utils/funcs';

type DataKeys = 'user_num' | 'cards_num' | 'deck_num'; // 权限列表
type Card = { datakey: DataKeys; label: string; bg: string }; // 权限使用情况 - 展示
type AuthInfo = Record<DataKeys, number>; // 权限使用情况 - 数据

const cardList: Array<Card> = [
	{ bg: 'bg-indigo-300', label: '牌型数', datakey: 'cards_num' },
	{ bg: 'bg-purple-300', label: '牌组数', datakey: 'deck_num' },
	{ bg: 'bg-pink-300', label: '子用户数', datakey: 'user_num' },
];

const OrdinaryHome = () => {
	const [authinfo, setauthinfo] = useState<{ name: string; effective: number; auth_id: number } & AuthInfo>({
		name: '',
		effective: 0,
		auth_id: 0,
		user_num: 0,
		cards_num: 0,
		deck_num: 0,
	});
	const [useruse, setuseruse] = useState<AuthInfo>({
		user_num: 0,
		cards_num: 0,
		deck_num: 0,
	});

	useEffect(() => {
		const APIlist: Array<GetAuthParams> = ['get', 'getuse'];
		Promise.all(APIlist.map(getAuth)).then(([authinfo, useruse]: any) => {
			if (!authinfo.auth_id) return;
			setauthinfo(authinfo);
			setuseruse(useruse);
		});
	}, []);

	return (
		<div>
			<div className=' bg-white shadow-sm rounded p-4 box-content text-base'>
				<p className=' mb-4 '>
					<span>{authinfo.name} </span>
					<span className={`${authinfo.effective > 7 ? 'text-gray-400' : ' text-red-500'}`}>
						剩余{authinfo.effective}天（ 到期时间：
						{new Date(Date.now() + authinfo.effective * 24 * 60 * 60 * 1000).toLocaleDateString()} ）
					</span>
				</p>
				<div className=' flex flex-wrap gap-4'>
					{cardList.map(({ bg, label, datakey }) => (
						<div key={label} className={`${bg} font-mono min-w-32 rounded shadow p-2 text-white `}>
							<p className=' text-lg font-bold mb-0'>{label}</p>
							<CountUp className=' text-4xl min-w-12 inline-block' end={useruse[datakey]} duration={0.75} />
							<span className=' text-2xl'>/{authinfo[datakey]}</span>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default memo(OrdinaryHome);
